<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <!-- <div class="header-content headerSearch"> -->
        <el-card title="查询条件">
          <template #header>
            <div class="header-card-header">
              <span>查询条件</span>
            </div>
          </template>
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form" :inline="true">
            <el-form-item label="任务名称">
              <el-input v-model="headerSearchForm.taskName" placeholder="请输入任务名称" />
            </el-form-item>
            <el-form-item label="进度">
              <el-input v-model="headerSearchForm.progress" placeholder="请输入进度" />
            </el-form-item>
            <el-form-item label="提交人">
              <el-input v-model="headerSearchForm.submitter" placeholder="请输入提交人" />
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="headerSearchForm.startTime"
                type="datetime"
                placeholder="开始时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="MMM DD, YYYY"
                time-format="HH:mm"
              />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="headerSearchForm.endTime"
                type="datetime"
                placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="MMM DD, YYYY"
                time-format="HH:mm"
              />
            </el-form-item>
            <el-form-item class="header-buttons">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- </div> -->
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table
            :data="tableData"
            :stripe="true"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="taskName" label="任务名称" />
            <el-table-column prop="steelGrade" label="钢种" />
            <el-table-column prop="progress" label="进度" />
            <el-table-column prop="submitter" label="提交人" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column prop="date" label="时间" />
            <el-table-column label="操作" fixed="right" min-width="120">
              <template #default="scope">
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button type="warning" @click="handleDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    :before-close="handleClose"
    ref="dialogRef"
    @closed="cancel"
    calss="dialog-container"
    width="80%"
  >
    <el-form :model="dialogForm" label-width="auto">
      <el-tabs v-model="tabName" class="tabs" @tab-click="handleTabClick">
        <el-tab-pane label="仿真结果" name="simulationResults">
          <el-card class="graph-card">
            <el-row>
              <div class="chart-container" ref="chartRef"></div>
              <div class="form-container">
                <el-form :inline="true" label-width="auto">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="连退速度">
                        <el-input :value="dialogForm.caSpeed" readonly size="small" style="width: 100px">
                          <template #suffix>m/min</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P5温度">
                        <el-input :value="dialogForm.p5Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P9温度">
                        <el-input :value="dialogForm.p9Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P11温度">
                        <el-input :value="dialogForm.p11Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P13温度">
                        <el-input :value="dialogForm.p13Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="P4温度">
                        <el-input :value="dialogForm.p4Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P6温度">
                        <el-input :value="dialogForm.p6Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P10温度">
                        <el-input :value="dialogForm.p10Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P12温度">
                        <el-input :value="dialogForm.p12Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="平整延伸率">
                        <el-input :value="dialogForm.skinPassRatio" readonly size="small" style="width: 100px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="退火工艺" name="annealingProcess">
          <el-card class="graph-card">
            <el-row>
              <div class="chart-container" ref="chartRef3"></div>
              <div class="form-container">
                <el-form :inline="true" label-width="auto">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="连退速度">
                        <el-input :value="dialogForm.caSpeed" readonly size="small" style="width: 100px">
                          <template #suffix>m/min</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P5温度">
                        <el-input :value="dialogForm.p5Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P9温度">
                        <el-input :value="dialogForm.p9Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P11温度">
                        <el-input :value="dialogForm.p11Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P13温度">
                        <el-input :value="dialogForm.p13Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="P4温度">
                        <el-input :value="dialogForm.p4Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P6温度">
                        <el-input :value="dialogForm.p6Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P10温度">
                        <el-input :value="dialogForm.p10Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="P12温度">
                        <el-input :value="dialogForm.p12Tem" readonly size="small" style="width: 100px">
                          <template #suffix>℃</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="平整延伸率">
                        <el-input :value="dialogForm.skinPassRatio" readonly size="small" style="width: 100px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-card title="带钢基本信息" class="baseInfo">
          <template #header>
            <div class="card-header">
              <span>带钢基本信息</span>
            </div>
          </template>
          <el-row class="row-container">
            <el-col :span="9.6">
              <el-card title="酸轧PDO">
                <template #header>
                  <div class="card-header">
                    <span>酸轧PDO</span>
                  </div>
                </template>
                <el-form :inline="true" label-width="auto" style="font-size: 10px">
                  <el-form-item label="酸轧出口卷号">
                    <el-input :value="dialogForm.extId" readonly />
                  </el-form-item>
                  <el-form-item label="钢种">
                    <el-input :value="dialogForm.steelGrade" readonly />
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
            <el-col :span="14.4">
              <el-card title="酸轧PDI">
                <template #header>
                  <div class="card-header">
                    <span>酸轧PDI</span>
                  </div>
                </template>
                <el-form :inline="true" label-width="auto">
                  <el-form-item label="冷轧出口厚度">
                    <el-input :value="dialogForm.extThick" readonly>
                      <template #suffix>mm</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="冷轧出口宽度">
                    <el-input :value="dialogForm.extWidth" readonly>
                      <template #suffix>mm</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="生产代码">
                    <el-input :value="dialogForm.productionCode" readonly />
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
          <el-row class="row-container">
            <el-col :span="12">
              <el-card title="热轧PDI" class="hot-pdi">
                <template #header>
                  <div class="card-header">
                    <span>热轧PDI</span>
                  </div>
                </template>
                <el-form :inline="true" label-width="auto">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="C含量">
                        <el-input :value="dialogForm.C_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="P含量">
                        <el-input :value="dialogForm.P_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Ni含量">
                        <el-input :value="dialogForm.Ni_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="B含量">
                        <el-input :value="dialogForm.B_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Nb含量">
                        <el-input :value="dialogForm.Nb_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="Si含量">
                        <el-input :value="dialogForm.Si_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="S含量">
                        <el-input :value="dialogForm.S_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Cr含量">
                        <el-input :value="dialogForm.Cr_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Mo含量">
                        <el-input :value="dialogForm.Mo_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Ti含量">
                        <el-input :value="dialogForm.Ti_content" readonly size="small" style="width: 100px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="Mn含量">
                        <el-input :value="dialogForm.Mn_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Cu含量">
                        <el-input :value="dialogForm.Cu_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Als含量">
                        <el-input :value="dialogForm.Als_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="N含量">
                        <el-input :value="dialogForm.N_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                      <el-form-item label="Y含量">
                        <el-input :value="dialogForm.Y_content" readonly size="small" style="width: 100px"> </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card title="热轧PDO">
                <template #header>
                  <div class="card-header">
                    <span>热轧PDO</span>
                  </div>
                </template>
                <el-row style="min-height: 250px">
                  <el-col>
                    <el-form-item label="rdt">
                      <el-input :value="dialogForm.rdt" readonly size="small" style="width: 100px">
                        <template #suffix>℃</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="fdt">
                      <el-input :value="dialogForm.fdt" readonly size="small" style="width: 100px">
                        <template #suffix>℃</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="ct">
                      <el-input :value="dialogForm.ct" readonly size="small" style="width: 100px">
                        <template #suffix>℃</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="热轧出口厚度">
                      <el-input :value="dialogForm.hrExtThick" readonly size="small" style="width: 100px">
                        <template #suffix>mm</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card title="组织成份">
                <template #header>
                  <div class="card-header">
                    <span>组织成份</span>
                  </div>
                </template>
                <el-form style="min-height: 250px">
                  <el-form-item label="铁素体">
                    <el-text>{{ dialogForm.ferrite + '%' }}</el-text>
                  </el-form-item>
                  <el-form-item label="珠光体">
                    <el-text>{{ dialogForm.pearlite + '%' }}</el-text>
                  </el-form-item>
                  <el-form-item label="贝氏体">
                    <el-text>{{ dialogForm.bainite + '%' }}</el-text>
                  </el-form-item>
                  <el-form-item label="马氏体">
                    <el-text>{{ dialogForm.martensite + '%' }}</el-text>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-row class="row-container">
          <el-col :span="6">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>力学性能</span>
                </div>
              </template>
              <el-form>
                <el-form-item label="屈服强度">
                  <el-text>{{ dialogForm.yieldStrength + 'MPa' }}</el-text>
                </el-form-item>
                <el-form-item label="抗拉强度">
                  <el-text>{{ dialogForm.tensileStrength + 'MPa' }}</el-text>
                </el-form-item>
                <el-form-item label="延伸率">
                  <el-text>{{ dialogForm.elongation + '%' }}</el-text>
                </el-form-item>
                <el-form-item label="n值">
                  <el-text>{{ dialogForm.n_value }}</el-text>
                </el-form-item>
                <el-form-item label="r值">
                  <el-text>{{ dialogForm.r_value }}</el-text>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card style="margin-left: 5px">
              <template #header>
                <div class="card-header" style="max-height: 16px">
                  <span>温度</span>
                  <el-select v-model="plateTem" placeholder="板温" style="width: 160px" @change="plateTemChange(plateTem)">
                    <el-option v-for="item in plateTemOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </template>
              <div class="chart-container-bottom" ref="chartRef2"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tabs>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage, ElMessageBox, TabsPaneContext } from 'element-plus';
  // import '/@/views/steelCoilServiceModel/steelCoilServiceModelCommonStyle.less';
  import { listApi } from '/@/api/furnaceTempDynamicCtrl/list';
  // import GraphTemp from './GraphTemp.vue';
  import { LineChart } from 'echarts/charts';
  import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, VisualMapComponent } from 'echarts/components';
  import * as echarts from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, MarkLineComponent, VisualMapComponent]);

  interface SearchForm {
    taskName: string;
    progress: string;
    submitter: string;
    startTime: string;
    endTime: string;
  }

  // 表单数据
  const headerSearchForm = reactive<SearchForm>({
    taskName: '',
    progress: '',
    submitter: '',
    startTime: '',
    endTime: '',
  });

  // 表格数据
  const tableData = ref([
    {
      indocno: 0,
      taskName: '任务名称',
      steelGrade: '钢种',
      progress: '进度',
      submitter: '提交人',
      remark: '备注',
      date: '时间',
    },
  ]);

  let dialogVisible = ref(false);
  let dialogTitle = ref('');
  const tabName = ref('simulationResults');
  const plateTem = ref('1');

  const plateTemOptions = [
    { label: '加热段1板温', value: '1' },
    { label: '加热段2板温', value: '2' },
    { label: '加热段3板温', value: '3' },
    { label: '加热段4板温', value: '4' },
    { label: '加热段5板温', value: '5' },
  ];

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 1,
  });

  const dialogForm = reactive({
    caSpeed: '240',
    p4Tem: '804',
    p5Tem: '821',
    p6Tem: '684',
    p9Tem: '402',
    p10Tem: '400',
    p11Tem: '380',
    p12Tem: '360',
    p13Tem: '185',
    skinPassRatio: '1.050',
    extId: 'X23B686017000',
    steelGrade: 'DC01',
    extThick: '1',
    extWidth: '1250',
    productionCode: '80TL',
    C_content: '0.017',
    Si_content: '0.00',
    Mn_content: '0.170',
    P_content: '0.012',
    S_content: '0.010',
    Cu_content: '0.059',
    Ni_content: '0.039',
    Cr_content: '0.014',
    Als_content: '0.032',
    B_content: '0',
    Mo_content: '0.001',
    N_content: '0',
    Nb_content: '0.001',
    Ti_content: '0',
    Y_content: '0',
    rdt: '0',
    fdt: '903',
    ct: '720',
    hrExtThick: '4',
    ferrite: '',
    pearlite: '',
    bainite: '',
    martensite: '',
    yieldStrength: '190.31',
    tensileStrength: '314.08',
    elongation: '43.07',
    n_value: '0.20',
    r_value: '2.15',
  });

  const xdata = ref<any>([3.5, 4.4, 4.8, 5, 6.4, 7.6, 8.8, 9.6]);
  const actData = ref<any>([
    dialogForm.p4Tem,
    dialogForm.p5Tem,
    dialogForm.p6Tem,
    dialogForm.p9Tem,
    dialogForm.p10Tem,
    dialogForm.p11Tem,
    dialogForm.p12Tem,
    dialogForm.p13Tem,
  ]);
  const graphShow = ref<any>([]);
  const selectList1 = ref<any>([800, 810, 700, 400, 400, 390, 380, 200]);
  const selectList2 = ref<any>([810, 700, 400, 400, 390, 380, 200, 800]);
  const selectList3 = ref<any>([700, 400, 400, 390, 380, 200, 800, 810]);
  const selectList4 = ref<any>([400, 400, 390, 380, 200, 800, 810, 700]);
  const selectList5 = ref<any>([400, 390, 380, 200, 800, 810, 700, 400]);
  const chartRef = ref<HTMLElement | null>(null);
  const chartRef2 = ref<HTMLElement | null>(null);
  const chartRef3 = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;
  let chartInstance2: echarts.ECharts | null = null;
  let chartInstance3: echarts.ECharts | null = null;

  const handleDetail = (row: any) => {
    dialogVisible.value = true;
    graphShow.value = selectList1.value;
    // 延迟初始化图表，确保DOM已渲染
    nextTick(() => {
      setTimeout(initCharts, 100);
    });
  };

  const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done();
      })
      .catch(() => {
        // catch error
      });
  };

  const cancel = () => {
    dialogVisible.value = false;
  };

  // 窗口大小变化处理
  const handleResize = () => {
    nextTick(() => {
      chartInstance?.resize();
      chartInstance2?.resize();
      chartInstance3?.resize();
    });
  };

  // 获取表格数据
  const fetchTableData = async () => {
    try {
      const param = {
        page: {
          pageIndex: pagination.currentPage,
          pageSize: pagination.pageSize,
        },
        dto: {
          // productionLine: headerSearchForm.productionLine,
          // dicVariableName: headerSearchForm.variableName,
          // dicVariableDescription: headerSearchForm.variableDescription,
        },
      };
      // const res = await listApi.getTableData(param);
      // tableData.value = res.data.data.records;
      // pagination.total = res.data.data.total;
    } catch (error) {
      ElMessage.error('获取数据失败');
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
      headerSearchForm[key] = '';
    });
    handleSearch();
  };

  // 删除方法
  const handleDelete = async (row: any) => {
    try {
      await listApi.delete(row.indocno);
    } catch (error) {
      ElMessage.error('删除失败');
    } finally {
      fetchTableData();
    }
  };

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  const plateTemChange = (val: string) => {
    graphShow.value = [];
    switch (val) {
      case '1':
        console.log('1');
        graphShow.value = selectList1.value;
        break;
      case '2':
        console.log('2');
        graphShow.value = selectList2.value;
        break;
      case '3':
        console.log('3');
        graphShow.value = selectList3.value;
        break;
      case '4':
        console.log('4');
        graphShow.value = selectList4.value;
        break;
      case '5':
        console.log('5');
        graphShow.value = selectList5.value;
        break;
      default:
        break;
    }
    getLimit(graphShow.value, optionB);
    optionB.value.series[0].data = graphShow.value;
    chartInstance2?.setOption(optionB.value, true);
  };

  // 生命周期钩子
  onMounted(() => {
    // fetchTableData();
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    chartInstance?.dispose();
    chartInstance2?.dispose();
    chartInstance3?.dispose();
  });

  const handleTabClick = (tab: TabsPaneContext) => {
    if (tab.paneName == 'annealingProcess') {
      setTimeout(() => {
        try {
          if (chartRef3.value && !chartInstance3) {
            chartInstance3 = echarts.init(chartRef3.value);
            chartInstance3?.setOption(option.value, true);
          }
        } catch (error) {
          console.error('图表初始化失败:', error);
        }
      }, 100);
    }
  };

  const option = computed(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    legend: {
      data: ['温度'],
      right: '4%',
      top: '0%',
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
    },
    grid: {
      left: '5%',
      right: '15%',
      bottom: '0%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      name: '时间/min',
      data: xdata.value,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      splitLine: {
        show: true, // 网格线
      },
    },
    yAxis: {
      name: '温度/℃',
      type: 'value',
      min: 38,
      max: 47,
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      {
        name: '温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: actData.value,
        lineStyle: {
          color: '#00baff',
          width: 3,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(246, 160, 60, 0.2)' },
            { offset: 0.5, color: 'rgba(246, 160, 60, 0.2)' },
            { offset: 0.5, color: 'rgba(0, 186, 255, 0.2)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.2)' },
          ]),
        },
      },
    ],
  }));

  const optionB = computed(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    legend: {
      data: ['温度'],
      right: '4%',
      top: '0%',
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
    },
    grid: {
      left: '5%',
      right: '15%',
      bottom: '0%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      name: '时间/min',
      data: xdata.value,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      splitLine: {
        show: true, // 网格线
      },
    },
    yAxis: {
      name: '温度/℃',
      type: 'value',
      min: 38,
      max: 47,
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      {
        name: '温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: actData.value,
        lineStyle: {
          color: '#00baff',
          width: 3,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(246, 160, 60, 0.2)' },
            { offset: 0.5, color: 'rgba(246, 160, 60, 0.2)' },
            { offset: 0.5, color: 'rgba(0, 186, 255, 0.2)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.2)' },
          ]),
        },
      },
    ],
  }));

  const getLimit = (data: number[], option: any) => {
    // 获取数据中的最小值和最大值
    const dataMin: number = Math.min(...(data ?? [0]));
    const dataMax: number = Math.max(...(data ?? [0]));

    // 计算基础下限（200的整数倍）
    let baseMin: number = Math.floor(dataMin / 200) * 200;
    // 确保下限不低于0
    baseMin = Math.max(0, baseMin);

    // 计算基础上限（200的整数倍）
    let baseMax: number = Math.ceil(dataMax / 200) * 200;

    // 特殊处理：如果最大值刚好是200的倍数，且数据范围超过200，将上限提高一个区间
    if (dataMax === baseMax && dataMax - dataMin > 0) {
      baseMax += 200;
    }

    // 计算候选下限：如果基础下限与数据最小值差距超过200，使用更大的下限
    const candidateMin: number = Math.max(baseMin, Math.floor(dataMin / 200) * 200);

    // 确定最终下限：优先使用0，除非0会导致区间过大
    let finalMin: number = 0;
    if (baseMax - 0 > 600) {
      candidateMin == 200 ? (finalMin = 0) : (finalMin = candidateMin);
      // finalMin = candidateMin;
    }

    // 确保上限与最终下限的差距至少为200
    let finalMax: number = Math.max(baseMax, finalMin + 200);

    // 应用计算出的Y轴范围
    (option.value.yAxis as { min?: number; max?: number }).min = finalMin;
    (option.value.yAxis as { min?: number; max?: number }).max = finalMax;
  };

  // --- 初始化图表 ---
  const initCharts = () => {
    getLimit(actData.value, option);
    getLimit(graphShow.value, optionB);
    try {
      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance?.setOption(option.value, true);
      }
      if (chartRef2.value && !chartInstance2) {
        chartInstance2 = echarts.init(chartRef2.value);
        chartInstance2?.setOption(optionB.value, true);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  .common-layout {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;

    &.linear-gradient {
      background-image: linear-gradient(to top, white, @primary-color) !important;
    }
  }

  .table-container-main {
    border-radius: @border-radius;
    height: 70vh;
    background-color: #fff;
    box-shadow: @box-shadow;
    display: flex;
    align-items: center;

    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin-left: 20px;
    }
  }

  .pagination {
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .dialog-container {
    display: flex;
    justify-content: space-between;
    height: 80vh;
    width: 80vw;
  }
  .tabs {
    height: 100%;
    width: 100%;
  }

  .graph-card {
    height: 30%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .chart-container {
    width: 65% !important; /* 覆盖可能的百分比继承问题 */
    height: 27.5vh; /* 固定高度 */
    min-width: 27.5vh; /* 防止宽度塌陷 */
  }

  .form-container {
    height: 100%;
    width: 35%;
  }

  .baseInfo {
    margin-top: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .row-container {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    flex-wrap: nowrap;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .chart-container-bottom {
    width: 100% !important; /* 覆盖可能的百分比继承问题 */
    height: 27.5vh; /* 固定高度 */
    min-width: 27.5vh; /* 防止宽度塌陷 */
  }

  .header-container {
    margin-top: 5px;
    height: 15vh;
    .el-card {
      :deep(.el-card__header) {
        height: 3vh;
        display: flex;
        align-items: center;
      }
    }
  }

  .headerSearch {
    width: 100%;
  }
</style>
